<template>
  <div>
    <el-card class="box-card">
      <el-button
        type="success"
        size="mini"
        icon="el-icon-plus"
        @click="show(2, '添加一级菜单')"
        plain
        >添加一级菜单</el-button
      >
      <el-table
        :data="menuList"
        tooltip-effect="dark"
        style="width: 100%"
        height="610px"
        row-key="id"
        border
        width="auto"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="菜单名称"> </el-table-column>
        <el-table-column prop="appUrl" label="功能路径"> </el-table-column>
        <el-table-column prop="imgUrl" label="图表路径" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="permissionCode"
          label="权限码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="menuType" label="菜单类型" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="show(0, '修改菜单', scope.row.id)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="delMenu(scope.row.id)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-plus"
              size="mini"
              @click="show(1, '新增菜单', scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <MenuAdd
      :addOrUpdateVisible="addOrUpdateVisible"
      @changeShow="showAddOrUpdate"
      ref="addOrUpdateRef"
      :title="title"
      :tag="tag"
      :subData="subData"
      :originName="originName"
    ></MenuAdd>
  </div>
</template>

<script>
import { menuTree } from "../../api/roles";
import MenuAdd from "./MenuAdd";
import { delMenu, getMenuById } from "../../api/menus";

export default {
  name: "Menus",
  data() {
    return {
      menuList: [],
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
      title: "",
      subData: {
        id: null,
        name: "",
        appUrl: "",
        imgUrl: "",
        permissionCode: "",
        parentId: null,
      },
      tag: 1,
      originName: "",
    };
  },
  components: {
    MenuAdd,
  },
  created() {
    this.menuTree();
  },
  methods: {
    // 异步请求菜单列表数据
    async menuTree() {
      const { data } = await menuTree();
      if (data.code === "2000") {
        this.menuList = data.data;
      } else {
        this.$message({
          message: data.msg,
          type: "error",
        });
      }
    },
    // 按钮点击事件 显示新增编辑弹窗组件
    show(tag, title, id) {
      this.title = title;
      this.tag = tag;
      if (tag < 1) {
        getMenuById(id).then((res) => {
          this.subData = res.data.data;
          this.originName = res.data.data.name;
        });
      } else if (tag < 2) {
        this.subData.parentId = id;
      } else {
        this.subData.parentId = 0;
      }
      this.addOrUpdateVisible = true;
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data) {
      this.addOrUpdateVisible = data !== "false";
      this.menuTree();
    },
    // 删除菜单以及子菜单
    delMenu(delId) {
      this.$confirm("此操作将永久删除菜单及子菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delMenu(delId)
          .then((res) => {
            if (res.data.code === "2000") {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            }
            this.menuTree();
          })
          .catch((e) => {
            console.log(e);
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-dropdown {
  float: right;
  padding-right: 20px;
}
</style>
